<template>
    <view>
        <z-paging
            ref="paging"
            v-model="dataList"
            :refresher-out-rate="0.8"
            auto-scroll-to-top-when-reload
            safe-area-inset-bottom
            bg-color="#fff"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            @query="queryList"
        >
            <view slot="top">
                <u-tabs
                    :list="navList"
                    @click="click"
                    @change="changeType"
                    :current="current"
                    :scrollable="false"
                    :inactiveStyle="inactiveStyle"
                    :activeStyle="activeStyle"
                    lineColor="#588BF3"
                ></u-tabs>
            </view>
            <view class="bottom" slot="bottom">
                <u-button
                    v-if="authority === 'salesman'"
                    :text="current ? '添加被管理人' : '我的管理码'"
                    color="#1682FF"
                    shape="circle"
                    @click="showCode"
                />
                <u-button
                    v-if="authority === 'customer' && current == 1"
                    text="添加被管理人"
                    color="#1682FF"
                    shape="circle"
                    @click="showCode"
                />
            </view>
            <view class="item" v-for="(item, index) in dataList" :key="index">
                <view class="item_detail flex_wrap" @click="goto(item)">
                    <u-image
                        height="112rpx"
                        width="112rpx"
                        :src="
                            current
                                ? item.userAvatar
                                    ? item.userAvatar
                                    : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/23/0e6265fd99fa49a9bacf3791420d6de6.png'
                                : item.agentUserAvatar
                                ? item.agentUserAvatar
                                : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/23/0e6265fd99fa49a9bacf3791420d6de6.png'
                        "
                        mode="aspectFill"
                        radius="50%"
                    />
                    <view style="margin-left: 20rpx">
                        <text class="total">{{
                            current ? item.userNickName : item.agentUserNickName
                        }}</text>
                        <u-gap height="20rpx" />
                        <u-text
                            :text="`权限：${item.powerDesc}`"
                            size="24rpx"
                            color="#777777"
                        ></u-text>
                    </view>
                    <view
                        class="flex_wrap row_between"
                        style="position: absolute; right: 30rpx; top: 34rpx"
                        v-if="current === 0"
                    >
                        <view class="button flex_wrap">
                            <u-icon
                                name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/03/25/d21b039fdfd14c329156c820ed894de1.png"
                                size="48rpx"
                                color="#999"
                                stop
                                @click="open(item)"
                                style="margin-right: 30rpx"
                            />
                            <u-icon
                                name="trash"
                                size="58rpx"
                                color="#999"
                                stop
                                @click="cancelOrderBtn(item)"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
        <u-modal
            :show="showCancelModal"
            title="提示"
            content="是否确认删除商品"
            @confirm="confirmCancelOrder"
            @cancel="cancelConfirm"
            showCancelButton
        >
            <view style="text-align: center">是否确认删除?</view>
        </u-modal>
        <u-popup :show="show" mode="bottom" @close="close" closeable>
            <view style="min-height: 600rpx; padding-top: 50rpx">
                <view
                    style="
                        text-align: center;
                        font-size: 32rpx;
                        font-weight: bold;
                    "
                    >权限管理</view
                >
                <view
                    class="flex_wrap row_between"
                    style="padding: 40rpx; align-items: center"
                >
                    <u-text
                        text="代运营-视频 "
                        size="32rpx"
                        color="#3D3D3D"
                    ></u-text>
                    <u-switch
                        v-model="value1"
                        @change="change1"
                        :activeValue="1"
                        :inactiveValue="0"
                        size="20"
                    ></u-switch>
                </view>
                <u-line></u-line>
                <view
                    class="flex_wrap row_between"
                    style="padding: 40rpx; align-items: center"
                >
                    <u-text
                        text="代运营-资讯 "
                        size="32rpx"
                        color="#3D3D3D"
                    ></u-text>
                    <u-switch
                        v-model="value2"
                        @change="change1"
                        :activeValue="2"
                        :inactiveValue="0"
                        size="20"
                    ></u-switch>
                </view>
                <u-line></u-line>
                <view
                    class="flex_wrap row_between"
                    style="padding: 40rpx; align-items: center"
                >
                    <u-text
                        text="优惠券核销 "
                        size="32rpx"
                        color="#3D3D3D"
                    ></u-text>
                    <u-switch
                        v-model="value3"
                        @change="change1"
                        :activeValue="4"
                        :inactiveValue="0"
                        size="20"
                    ></u-switch>
                </view>
            </view>
        </u-popup>
        <u-modal
            :show="codeShow"
            title="代运营二维码"
            :showConfirmButton="false"
            closeOnClickOverlay
            @close="
                () => {
                    codeShow = false;
                }
            "
        >
            <u--image :src="baseSrc" width="200px" height="200px"></u--image
        ></u-modal>
    </view>
</template>

<script>
import {
    deleteF,
    addOrUpdate,
    getMyAgentsList,
    getAgentsOfMineList,
} from "@/api/customerAgent.js";
import { getMiniCodeByAppId } from "@/api/orderSalesman.js";
import { getCustomerIdBySalesmanId } from "@/api/card";
import { mapGetters } from "vuex";
import caches from "@/config/caches.js";

export default {
    data() {
        return {
            value1: 0,
            value2: 0,
            value3: 0,
            showService: false,
            codeShow: false,
            show: false,
            showCancelModal: false,
            actionStyle: {
                fontSize: "28rpx",
                color: "#333",
            },
            current: 0,
            inactiveStyle: {
                fontSize: "32rpx",
            },
            activeStyle: {
                fontSize: "32rpx",
                fontWeight: "bold",
                color: "#588BF3",
            },
            status: "",
            checkStatus: "",
            navList: [
                {
                    name: "管理我的",
                    status: "", //商品状态;0下架,1上架
                    checkStatus: "",
                    status: "",
                },
                {
                    name: "我管理的",
                    status: 1, //商品状态;0下架,1上架
                    checkStatus: 2,
                },
            ],
            dataList: [],
            cellIconStyle: {
                width: "36rpx",
                height: "36rpx",
                marginRight: "14rpx",
            },
            servicePhone: "",
            currentId: "",
            baseSrc: "",
            authority: this.$store.getters?.authority ?? "customer",
            power: 0,
            rowData: {},
        };
    },
    computed: {
        ...mapGetters(["userInfo", "isLogin"]),
    },
    beforeDestroy() {
        if (this.isLogin) {
            uni.removeStorageSync("loginBackUrl");
            uni.removeStorageSync("loginBackUrlOption");
        }
    },
    onLoad(e) {
        if (e.scene) {
            //addOrUpdate customerId : 被代理人客户ID（他人ID） agentCustomerId： 代理人客户ID（自己的客户ID）
            this.authority === "salesman" &&
                getCustomerIdBySalesmanId(this.userInfo.id).then((res) => {
                    res.code === 200 &&
                        addOrUpdate({
                            agentCustomerId: res.data,
                            customerId: e.scene,
                            power: 0,
                        });
                });
            this.authority === "customer" &&
                addOrUpdate({
                    agentCustomerId: this.userInfo.id,
                    customerId: e.scene,
                    power: 0,
                });
        }
    },
    onShow() {
        this.$refs.paging.reload();
    },
    methods: {
        showCode() {
            this.current && this.to_orderClass();
            !this.current && this.openScan();
        },
        change1(e) {
            this.power = this.value1 | this.value2 | this.value3;
            console.log("change1", this.power);
            addOrUpdate({
                customerId: this.rowData.customerId,
                id: this.rowData.id,
                agentCustomerId: this.rowData.agentCustomerId,
                power: this.power,
            });
        },
        open(item) {
            // console.log('open');
            this.show = true;
            this.rowData = item;
            const power = item.power;
            // <!-- 权限-位运算;1视频管理,2资讯管理,4核销优惠券 -->
            if (!power) {
                this.value1 = 0;
                this.value2 = 0;
                this.value3 = 0;
            }
            if ((power & 1) === 1) this.value1 = 1;
            if ((power & 2) === 2) this.value2 = 2;
            if ((power & 4) === 4) this.value3 = 4;
        },
        close() {
            this.show = false;
            this.$refs.paging.reload();
        },
        to_orderClass() {
            uni.scanCode({
                onlyFromCamera: true,
                success(res) {
                    console.log("res", res);
                    uni.navigateTo({
                        url: `/${res.path}`,
                    });
                },
            });
        },

        toreciveList(item) {
            uni.$u.route({
                url: "pages_shop1/goods/index",
                params: {
                    id: item.id,
                },
            });
        },

        cancelOrderBtn(item) {
            this.currentId = item.id;
            this.showCancelModal = true;
        },
        cancelConfirm() {
            this.currentId = "";
            this.showCancelModal = false;
        },
        goto(item) {
            console.log("object :>> ", this.current);
            if (this.current) {
                uni.navigateTo({
                    url: `/pages_my/myCard/myUserPower?power=${item.power}&agentCustomerId=${item.customerId}`,
                });
            }
        },
        async confirmCancelOrder() {
            const that = this;
            const result = await deleteF(this.currentId);
            uni.showToast({
                title: "删除成功",
                icon: "success",
                success() {
                    that.showCancelModal = false;
                    that.currentId = "";
                    that.$refs.paging.reload();
                },
            });
        },
        toDetail(item) {
            uni.$u.route({
                url: "/pages_shop1/order/order_detail/order_detail",
                params: {
                    id: item.orderNum,
                    detailStatus: 0, //1：用户中心进去的  0：客户端领取记录进去的
                },
            });
        },
        async openScan() {
            const { data } = await getCustomerIdBySalesmanId(this.userInfo.id);
            const version = __wxConfig.envVersion;
            const params = {
                page: "pages_my1/operate/index",
                scene: data,
                env_version: version,
                check_path: false,
                appId: this.$appId,
            };
            console.log(data, params);
            const res = await getMiniCodeByAppId(params);
            if (res.code === 200 && res.data) {
                var showImgData = res.data;
                this.baseSrc = "data:image/png;base64," + showImgData;
                this.codeShow = true;
            }
        },
        orderDetail() {
            uni.navigateTo({
                url: "../order_detail/order_detail",
            });
        },
        changeType(e) {
            this.$refs.paging.reload();
        },
        click(e) {
            console.log("e :>> ", e);
            this.current = e.index;
        },
        async queryList(pageNo, pageSize) {
            const params = {
                pageNum: pageNo,
                pageSize: pageSize,
            };
            const result = !this.current
                ? await getMyAgentsList(params)
                : await getAgentsOfMineList(params);
            this.$refs.paging.completeByTotal(
                result.data.rows,
                result.data.total
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.search {
    padding: 32rpx 28rpx;
}

.item {
    margin: 40rpx 28rpx 0;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
    border-radius: 12rpx;
}

.item_time {
    height: 80rpx;
    border-bottom: 2rpx solid #f3f3f3;
    padding: 0 24rpx;
}

.item_detail {
    border-bottom: 2rpx solid #f3f3f3;
    padding: 26rpx 20rpx 20rpx;
    position: relative;
    image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 8rpx;
    }
}

.total {
    display: block;
    width: 450rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 400;
    font-size: 36rpx;
    color: #3d3d3d;
}

.detail_tt {
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #666666;

    text {
        margin-right: 10rpx;
    }
}

.price {
    height: 72rpx;
    text-align: right;
    font-size: 24rpx;
    color: #333333;
    line-height: 72rpx;
    margin-right: 12rpx;
    font-weight: 400;
    display: flex;
    padding: 0 20rpx;
    justify-content: flex-end;
    .price_t {
        font-size: 32rpx;
        font-weight: 400;
        color: #ff0000;
    }
}

.payBtn {
    height: 52rpx;
    line-height: 52rpx;
    font-size: 24rpx;
    margin-right: 0;
    margin-left: 0;
    background: #588bf3;
    color: #ffffff;
    border-radius: 22rpx;
    font-weight: 400;
}

.payBtn::after {
    border: none;
}

.cancelOrderBtn {
    // width: 158rpx;
    height: 52rpx;
    line-height: 52rpx;
    font-size: 24rpx;
    font-weight: 400;
    border: 1px solid #777777;
    border-radius: 22rpx;
    outline: none;
    background-color: #fff;
    margin-right: 20rpx;
}

.cancelOrderBtn::after {
    border: none;
}

.customerSerivce {
    width: 32rpx;
    height: 32rpx;
}
.bottom {
    width: 100%;
    padding: 0 30rpx 60rpx 30rpx;
    box-sizing: border-box;
}
</style>
